<template>
  <el-menu
    :default-active="activeMenu"
    class="sidebar-menu"
    :collapse="isCollapse"
    router
  >
    <el-menu-item index="/">
      <el-icon><el-icon-odometer /></el-icon>
      <template #title>仪表盘</template>
    </el-menu-item>
    
    <el-menu-item index="/models">
      <el-icon><el-icon-files /></el-icon>
      <template #title>数据模型</template>
    </el-menu-item>
    
    <el-sub-menu index="data" v-if="models.length > 0">
      <template #title>
        <el-icon><el-icon-grid /></el-icon>
        <span>数据管理</span>
      </template>
      
      <el-menu-item 
        v-for="model in models" 
        :key="model.id" 
        :index="`/data/${model.name}`"
      >
        {{ model.displayName || model.name }}
      </el-menu-item>
    </el-sub-menu>
    
    <el-menu-item index="/api-docs">
      <el-icon><el-icon-document /></el-icon>
      <template #title>API文档</template>
    </el-menu-item>
    
    <el-menu-item index="/settings">
      <el-icon><el-icon-setting /></el-icon>
      <template #title>系统设置</template>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useModelStore } from '../stores/model'

const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: false
  }
})

const route = useRoute()
const modelStore = useModelStore()

const models = computed(() => modelStore.models)

const activeMenu = computed(() => {
  const { path } = route
  
  if (path.startsWith('/data/')) {
    // 如果是数据管理页面，高亮数据管理菜单项
    return path
  }
  
  return path
})
</script>

<style scoped>
.sidebar-menu {
  height: 100%;
  border-right: none;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 200px;
}
</style> 